import React, { PureComponent } from 'react';
import { connect } from 'react-redux';
import { withRouter } from 'react-router-dom';
import styles from './style.module.scss';
class HotSearch extends PureComponent {
    constructor (props) {
        super(props);
        this.state = {
            musicScore: [
                {type: 1,name: '往后余生'},
                {type: 1,name: '出山'},
                {type: 1,name: '溯'},
                {type: 1,name: '春风十里'},
                {type: 1,name: '盗将行'},
                {type: 1,name: '写给黄淮'},
                {type: 1,name: '天空之城'},
                {type: 1,name: '夜空中最亮的星'},
                {type: 1,name: '加州旅馆'},
                {type: 1,name: '同桌的你'},
                {type: 1,name: '成都'},
                {type: 1,name: '平凡之路'},
                {type: 1,name: '后来'},
                {type: 1,name: '奇妙能力歌'},
            ]
        }
    }
    render () {
        const { musicScore } = this.state;
        const { history } = this.props;
        return (
            <div className={styles['hot-search']}>
                <div className={styles['hot-container']}>
                    <div className={styles['hot-head']}>
                        <img src="http://mobuz-live.oss-cn-hangzhou.aliyuncs.com/web/icon/icon_remen_search%402x.png" alt=""/>
                        <span>热门搜索</span>
                    </div>
                    <div className={styles['promptList']}>
                        {
                            musicScore.map((item, index) => {
                                return (
                                    <div className={styles['promptCell']} key={'history'+index} onClick={()=>{
                                        history.push({
                                            pathname: '/scoreSearch',
                                            state:{
                                                categoryIndex: item['type'],
                                                searchText: item['name']
                                            }
                                        })
                                    }}>{item['name']} </div> 
                                )
                            })
                        }
                    </div>
                </div>
            </div>
        )
    }
}

const mapState = (state) => ({

});

const mapDispatch = (dispatch) => ({

});


export default connect(mapState, mapDispatch)(withRouter(HotSearch));